---
title: PasswordUI
editUrl: https://github.com/toolbeam/openauth/blob/master/packages/openauth/src/ui/password.tsx
description: Reference doc for the `PasswordUI`.
---

import { Segment, Section, NestedTitle, InlineSection } from 'toolbeam-docs-theme/components'
import { Tabs, TabItem } from '@astrojs/starlight/components'

<div class="tsdoc">
<Section type="about">
Configure the UI that's used by the Password provider.

```ts {1,7-12}
import { PasswordUI } from "@openauthjs/openauth/ui/password"
import { PasswordProvider } from "@openauthjs/openauth/provider/password"

export default issuer({
  providers: {
    password: PasswordAdapter(
      PasswordUI({
        copy: {
          error_email_taken: "This email is already taken."
        },
        sendCode: (email, code) => console.log(email, code)
      })
    )
  },
  // ...
})
```
</Section>
---
## Methods
### PasswordUI
<Segment>
<Section type="signature">
```ts
PasswordUI(input)
```
</Section>
<Section type="parameters">
#### Parameters
- <p><code class="key">input</code> [<code class="type">PasswordUIOptions</code>](#passworduioptions)</p>
Configure the UI.
</Section>
<InlineSection>
**Returns** [<code class="type">PasswordConfig</code>](/docs/provider/password#passwordconfig)
</InlineSection>
Creates a UI for the Password provider flow.
</Segment>
## PasswordUIOptions
<Segment>
<Section type="parameters">
- <p>[<code class="key">copy?</code>](#passworduioptions.copy) <code class="primitive">Object</code></p>
  - <p>[<code class="key">button_continue</code>](#copy.button_continue) <code class="primitive">string</code></p>
  - <p>[<code class="key">change_prompt</code>](#copy.change_prompt) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_resend</code>](#copy.code_resend) <code class="primitive">string</code></p>
  - <p>[<code class="key">code_return</code>](#copy.code_return) <code class="primitive">string</code></p>
  - <p>[<code class="key">error_email_taken</code>](#copy.error_email_taken) <code class="primitive">string</code></p>
  - <p>[<code class="key">error_invalid_code</code>](#copy.error_invalid_code) <code class="primitive">string</code></p>
  - <p>[<code class="key">error_invalid_email</code>](#copy.error_invalid_email) <code class="primitive">string</code></p>
  - <p>[<code class="key">error_invalid_password</code>](#copy.error_invalid_password) <code class="primitive">string</code></p>
  - <p>[<code class="key">error_password_mismatch</code>](#copy.error_password_mismatch) <code class="primitive">string</code></p>
  - <p>[<code class="key">error_validation_error</code>](#copy.error_validation_error) <code class="primitive">string</code></p>
  - <p>[<code class="key">input_code</code>](#copy.input_code) <code class="primitive">string</code></p>
  - <p>[<code class="key">input_email</code>](#copy.input_email) <code class="primitive">string</code></p>
  - <p>[<code class="key">input_password</code>](#copy.input_password) <code class="primitive">string</code></p>
  - <p>[<code class="key">input_repeat</code>](#copy.input_repeat) <code class="primitive">string</code></p>
  - <p>[<code class="key">login</code>](#copy.login) <code class="primitive">string</code></p>
  - <p>[<code class="key">login_description</code>](#copy.login_description) <code class="primitive">string</code></p>
  - <p>[<code class="key">login_prompt</code>](#copy.login_prompt) <code class="primitive">string</code></p>
  - <p>[<code class="key">login_title</code>](#copy.login_title) <code class="primitive">string</code></p>
  - <p>[<code class="key">register</code>](#copy.register) <code class="primitive">string</code></p>
  - <p>[<code class="key">register_description</code>](#copy.register_description) <code class="primitive">string</code></p>
  - <p>[<code class="key">register_prompt</code>](#copy.register_prompt) <code class="primitive">string</code></p>
  - <p>[<code class="key">register_title</code>](#copy.register_title) <code class="primitive">string</code></p>
- <p>[<code class="key">sendCode</code>](#passworduioptions.sendcode) <code class="primitive">(email: <code class="primitive">string</code>, code: <code class="primitive">string</code>) => <code class="primitive">Promise</code><code class="symbol">&lt;</code><code class="primitive">void</code><code class="symbol">&gt;</code></code></p>
- <p>[<code class="key">validatePassword?</code>](#passworduioptions.validatepassword) [<code class="type">StandardSchema</code>](https://github.com/standard-schema/standard-schema)<code class="symbol"> | </code><code class="primitive">(password: <code class="primitive">string</code>) => <code class="primitive">undefined</code><code class="symbol"> | </code><code class="primitive">string</code><code class="symbol"> | </code><code class="primitive">Promise</code><code class="symbol">&lt;</code><code class="primitive">undefined</code><code class="symbol"> | </code><code class="primitive">string</code><code class="symbol">&gt;</code></code></p>
</Section>
Configure the password UI.
</Segment>
<NestedTitle id="passworduioptions.copy" Tag="h4" parent="PasswordUIOptions.">copy?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">Object</code>
</InlineSection>
</Section>
Custom copy for the UI.
</Segment>
<NestedTitle id="copy.button_continue" Tag="h5" parent="PasswordUIOptions.copy.">button_continue</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Continue</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the continue button.
</Segment>
<NestedTitle id="copy.change_prompt" Tag="h5" parent="PasswordUIOptions.copy.">change_prompt</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Forgot password?</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the forgot password link.
</Segment>
<NestedTitle id="copy.code_resend" Tag="h5" parent="PasswordUIOptions.copy.">code_resend</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Resend code</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the resend code button.
</Segment>
<NestedTitle id="copy.code_return" Tag="h5" parent="PasswordUIOptions.copy.">code_return</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Back to</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the "Back to" link.
</Segment>
<NestedTitle id="copy.error_email_taken" Tag="h5" parent="PasswordUIOptions.copy.">error_email_taken</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">There is already an account with this email.</code><code class="symbol">&rdquo;</code>
</InlineSection>
Error message when email is already taken.
</Segment>
<NestedTitle id="copy.error_invalid_code" Tag="h5" parent="PasswordUIOptions.copy.">error_invalid_code</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Code is incorrect.</code><code class="symbol">&rdquo;</code>
</InlineSection>
Error message when the confirmation code is incorrect.
</Segment>
<NestedTitle id="copy.error_invalid_email" Tag="h5" parent="PasswordUIOptions.copy.">error_invalid_email</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Email is not valid.</code><code class="symbol">&rdquo;</code>
</InlineSection>
Error message when the email is invalid.
</Segment>
<NestedTitle id="copy.error_invalid_password" Tag="h5" parent="PasswordUIOptions.copy.">error_invalid_password</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Password is incorrect.</code><code class="symbol">&rdquo;</code>
</InlineSection>
Error message when the password is incorrect.
</Segment>
<NestedTitle id="copy.error_password_mismatch" Tag="h5" parent="PasswordUIOptions.copy.">error_password_mismatch</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Passwords do not match.</code><code class="symbol">&rdquo;</code>
</InlineSection>
Error message when the passwords do not match.
</Segment>
<NestedTitle id="copy.error_validation_error" Tag="h5" parent="PasswordUIOptions.copy.">error_validation_error</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Password does not meet requirements.</code><code class="symbol">&rdquo;</code>
</InlineSection>
Error message when the user enters a password that fails validation.
</Segment>
<NestedTitle id="copy.input_code" Tag="h5" parent="PasswordUIOptions.copy.">input_code</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Code</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the code input.
</Segment>
<NestedTitle id="copy.input_email" Tag="h5" parent="PasswordUIOptions.copy.">input_email</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Email</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the email input.
</Segment>
<NestedTitle id="copy.input_password" Tag="h5" parent="PasswordUIOptions.copy.">input_password</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Password</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the password input.
</Segment>
<NestedTitle id="copy.input_repeat" Tag="h5" parent="PasswordUIOptions.copy.">input_repeat</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Repeat password</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the repeat password input.
</Segment>
<NestedTitle id="copy.login" Tag="h5" parent="PasswordUIOptions.copy.">login</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Login</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the login button.
</Segment>
<NestedTitle id="copy.login_description" Tag="h5" parent="PasswordUIOptions.copy.">login_description</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Sign in with your email</code><code class="symbol">&rdquo;</code>
</InlineSection>
Description of the login page.
</Segment>
<NestedTitle id="copy.login_prompt" Tag="h5" parent="PasswordUIOptions.copy.">login_prompt</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Already have an account?</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the login link.
</Segment>
<NestedTitle id="copy.login_title" Tag="h5" parent="PasswordUIOptions.copy.">login_title</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Welcome to the app</code><code class="symbol">&rdquo;</code>
</InlineSection>
Title of the login page.
</Segment>
<NestedTitle id="copy.register" Tag="h5" parent="PasswordUIOptions.copy.">register</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Register</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the register button.
</Segment>
<NestedTitle id="copy.register_description" Tag="h5" parent="PasswordUIOptions.copy.">register_description</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Sign in with your email</code><code class="symbol">&rdquo;</code>
</InlineSection>
Description of the register page.
</Segment>
<NestedTitle id="copy.register_prompt" Tag="h5" parent="PasswordUIOptions.copy.">register_prompt</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Don't have an account?</code><code class="symbol">&rdquo;</code>
</InlineSection>
Copy for the register link.
</Segment>
<NestedTitle id="copy.register_title" Tag="h5" parent="PasswordUIOptions.copy.">register_title</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">string</code>
</InlineSection>
</Section>

<InlineSection>
**Default** <code class="symbol">&ldquo;</code><code class="primitive">Welcome to the app</code><code class="symbol">&rdquo;</code>
</InlineSection>
Title of the register page.
</Segment>
<NestedTitle id="passworduioptions.sendcode" Tag="h4" parent="PasswordUIOptions.">sendCode</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** <code class="primitive">(email: <code class="primitive">string</code>, code: <code class="primitive">string</code>) => <code class="primitive">Promise</code><code class="symbol">&lt;</code><code class="primitive">void</code><code class="symbol">&gt;</code></code>
</InlineSection>
</Section>
Callback to send the confirmation pin code to the user.
```ts
{
  sendCode: async (email, code) => {
    // Send an email with the code
  }
}
```
</Segment>
<NestedTitle id="passworduioptions.validatepassword" Tag="h4" parent="PasswordUIOptions.">validatePassword?</NestedTitle>
<Segment>
<Section type="parameters">
<InlineSection>
**Type** [<code class="type">StandardSchema</code>](https://github.com/standard-schema/standard-schema)<code class="symbol"> | </code><code class="primitive">(password: <code class="primitive">string</code>) => <code class="primitive">undefined</code><code class="symbol"> | </code><code class="primitive">string</code><code class="symbol"> | </code><code class="primitive">Promise</code><code class="symbol">&lt;</code><code class="primitive">undefined</code><code class="symbol"> | </code><code class="primitive">string</code><code class="symbol">&gt;</code></code>
</InlineSection>
</Section>
Callback to validate the password on sign up and password reset.
```ts
{
  validatePassword: (password) => {
     return password.length < 8 ? "Password must be at least 8 characters" : undefined
  }
}
```
</Segment>
</div>